<template>
	<div ref="scEcharts" :style="{height:height, width:width}"></div>
</template>

<script>
	import * as echarts from 'echarts';
	import T from './echarts-theme-T.js';
	echarts.registerTheme('T', T);
	const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);

	export default {
		...echarts,
		name: "scEcharts",
		props: {
			height: { type: String, default: "100%" },
			width: { type: String, default: "100%" },
			nodata: {type: Boolean, default: false },
			option: { type: Object, default: () => {} }
		},
		data() {
			return {
				isActivat: false,
				myChart: null
			}
		},
		watch: {
			option: {
				deep:true,
				handler (v) {
					unwarp(this.myChart).setOption(v);
				}
			}
		},
		computed: {
			myOptions: function() {
				return this.option || {};
			}
		},
		activated(){
			if(!this.isActivat){
				this.$nextTick(() => {
					this.myChart.resize()
				})
			}
		},
		deactivated(){
			this.isActivat = false;
		},
		mounted(){
			this.isActivat = true;
			this.$nextTick(() => {
				this.draw();
			})
		},
		methods: {
			draw(){
				var myChart = echarts.init(this.$refs.scEcharts, 'T');
				myChart.setOption(this.myOptions);
				this.myChart = myChart;

        /**
         * 初始高亮状态
         */
        const _this = this
        myChart.on('finished', function(e) {
          var data = this.getOption().series[0].data;
          // console.log('设置高亮')
          // _this.chartAction(myChart, 'highlight', 0);
          // console.log(data, this)
          for (var i in data) {
            if (data) {
              if (data[i].highlight) {
                _this.chartAction(this, 'highlight', i);
              }
            }
          }
        });

        // /**
        //  * 鼠标移出 判断   有高亮标识的数据集 保持高亮
        //  */
        // myChart.on('mouseout', function (e) {
        //   var highlight = e.data.highlight;
        //   if (highlight) {
        //     _this.chartAction(this, 'highlight', e.dataIndex)
        //   }
        // })
        // /**
        //  *  鼠标hover 动作判断   非高亮标识的数据集 保持原状
        //  */
        // myChart.on('mouseover', function (e) {
        //   var highlight = e.data.highlight;
        //   if (!highlight) {
        //     _this.chartAction(this, 'downplay', e.dataIndex)
        //   }
        // })

        window.addEventListener('resize', () => myChart.resize());
			},
      /**
       * 执行action
       * @param instance  ecahrts 实例
       * @param type      action 类型
       * @param index     对应的 数据索引
       */
      chartAction(instance, type, index) {
        instance.dispatchAction({
          type: type,
          dataIndex: index
        })
      },
		}
	}
</script>
